<template>
  <!-- 表格卡片 -->
  <a-card size="small" :bordered="false" :hoverable="true" :scroll="{ x: 1500 }">
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-row :gutter="16">
          <a-col :span="10"> <a-input v-model:value="queryForm.key" placeholder="关键字查询" /></a-col>
          <a-col :span="4">
            <a-button type="primary" @click="getInitDateFind"><SearchOutlined />查询</a-button></a-col
          >
          <a-col :span="4">
            <a-button @click="getRemase"> <ReloadOutlined />重置</a-button></a-col
          >
          <a-col :span="2">
            <a-button @click="getImport"><VerticalAlignBottomOutlined />导出</a-button></a-col
          >
        </a-row>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.OA.ENTERPRISE" :refresh="getInitDate" />
      </div>
    </a-row>
    <a-table size="small" :dataSource="tableData" :columns="columns" :pagination="false" :loading="tableLoading" bordered @change="handleTableChange">
    </a-table>
    <!-- 分页-->
    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.limit"
        v-model:current="queryForm.page"
        v-model:pageSize="queryForm.limit"
        :total="total"
        @change="getInitDate"
        @showSizeChange="getInitDate"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </a-card>
</template>
<script setup>
  import { reactive, ref, onMounted, defineEmits, toRaw } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { Specialdonations } from '../../api/Specialdonations/Specialdonations';
  import dayjs from 'dayjs';
  //--------------------------- 表格 列 ---------------------------
  const columns = ref([
    {
      title: '知校系统订单',
      dataIndex: 'blext3',
      align: 'center',
      width: 150,
    },

    {
      title: '捐赠人',
      dataIndex: 'blname',
      align: 'center',
    },
    {
      title: '捐赠金额',
      dataIndex: 'blamount',
      align: 'center',
    },
    {
      title: '是否需要发票',
      dataIndex: 'blinvoice',
      align: 'center',
    },
    {
      title: '捐赠时间',
      dataIndex: 'bldate',
      align: 'center',
      sorter: (a, b) => {
        let aTimeString = a.bldate;
        let bTimeString = b.bldate;
        aTimeString = aTimeString.replace(/-/g, '/');
        bTimeString = bTimeString.replace(/-/g, '/');
        let aTime = new Date(aTimeString).getTime();
        let bTime = new Date(bTimeString).getTime();
        return bTime - aTime;
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      align: 'center',
      width: 100,
    },
  ]);
  const queryFormState = {
    page: 1,
    limit: PAGE_SIZE,
  };
  const queryForm = reactive({ ...queryFormState });
  const tableLoading = ref(false);
  const tableData = ref([]);
  const total = ref(0);
  const getInitDateFind = () => {
    message.success('查询成功');
    getInitDate();
  };
  // 表格初始化
  async function getInitDate() {
    try {
      let res = await Specialdonations.SpaceTableInite(queryForm);
      console.log(res, '初始化');
      tableData.value = res.page.list;
      total.value = res.page.totalCount;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //新增
  //表单验证规则
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };

  const formState = reactive({ bldate: '' });
  const rules = {
    blname: [
      {
        required: true,
        message: '请填写捐赠方',
        trigger: 'change',
      },
    ],
    blamount: [
      {
        required: true,
        message: '请填写捐赠金额',
        trigger: 'change',
      },
    ],
    bldate: [
      {
        required: true,
        message: '请填写捐赠日期',
        trigger: 'change',
      },
    ],
  };

  //确认提交
  const handleOk = (e) => {
    formRef.value
      .validate()
      .then(() => {
        let queryFrom = { ...toRaw(formState) };
        console.log(queryFrom);
      })
      .catch((error) => {
        console.log(error);
        message.warning('表单有未填项');
      });
  };
  //删除
  const confirm = async (record) => {};
  //导出
  const getImport = async () => {
    try {
      let res = await Specialdonations.SpaceImport();
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(new Blob([res.data]));
      link.href = url;
      link.download = '专项捐赠信息.xlsx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      message.success(`导出成功！`);
    } catch (error) {
      smartSentry.captureError(error);
    }
  };
  onMounted(() => {
    getInitDate();
  });
</script>
